<template>
    <div class="head-top">
                <div class="head-logo">
                    <img src="https://course.myhope365.com/img/logo-text.321d0dc2.png">
                </div>
                <div class="head-nav">
                    <div>
                        <div class="nav-1">
                            <ul>
                                <li><a href="/index">首页</a></li>
                                
                                <li @mouseenter="isShow = true" @mouseleave="isShow = false" >
                                            <classifyListView></classifyListView>                                 
                                </li>
                                <li><a href="https://stu.myhope365.com" target="_blank"> 教学管理云平台</a></li>
                            </ul>
                        </div>    
                        <div class="nav-input">
                            <span>
                                <!-- 添加 ref="searchInput" 属性 -->
                                <input class="searchInput" placeholder="搜索课程~" v-model="search">
                                <span>
                                    <button class="searchButton" @click="searchCourse">
                                        <img src="" alt="">
                                    </button>
                                </span>
                            </span>    
                        </div>
                        <div class="nav-login">
                                <div>
                                    <span class="span">
                                        <router-link to="/shop">
                                            <img src="" alt="">
                                        </router-link>
                                    </span>
                                </div>
                                <div class="login">
                                    <div class="open-minded" v-show="!$store.state.isLogin">开通VIP免费观看全站视频</div>
                                    <div  data-bs-toggle="modal" data-bs-target="#myModal" class="login-or-register" style="color: rgb(53, 199, 222);"
                                    @click="showModal" v-show="!$store.state.isLogin">
                                        登录/注册
                                    </div>
                                    <!-- 登录注册弹窗 -->
                                    <a-modal v-model="$store.state.isModalShow" @ok="hideModel" :footer="null" style="width: 400px; " v-if="$store.state.isModalShow">
                                        <loginModal></loginModal>
                                    </a-modal>
                                    <a-popover placement="bottom">
                                            <template slot="content">
                                                <div class="userApproveItem">
                                                    <router-link to="/personal">个人中心</router-link>
                                                </div>
                                                <div class="userApproveItem">
                                                    <router-link to="/personal">我的课程</router-link>
                                                </div>
                                                <div class="userApproveItem">
                                                    <router-link to="/personal">我的订单</router-link>
                                                </div>
                                                <div class="userApproveItem" @click="userLogout">
                                                    退出登录
                                                </div>
                                            </template>

                                            <div class="user-info-box" v-show="$store.state.isLogin">
                                                <div class="user-avatar">
                                                    <a-avatar icon="user" :src="$store.state.userInfo.avatarUrl" />
                                                </div>
                                                <div class="user-info">
                                                    <div>{{ $store.state.userInfo.nickname }}</div>
                                                    <img src="" >
                                                    <div>青铜会员</div>
                                                </div>
                                            </div>
                                        </a-popover>
                                </div>
                        </div>
                    </div>
                </div> 
    </div>            
</template>
<script>
import loginModal from '@/components/loginModal.vue'
import classifyListView from '@/components/classifyListView.vue'
export default {
    name: 'TopView',
    data() {
        return {
            isShow: false,
            classifyList: [],
            search: ''
        }
    },
    components: {
        loginModal,
        classifyListView
    },
    created() {
        console.log(this.$store.state.isModalShow)
    },
    methods: {
        searchCourse() {
            this.$router.push({
                path: '/search',
                query: {
                    keyword:this.search
                }
            });
        },
        showModal(){
            this.$store.commit('changeModalShow', true)
        },
        hideModel(){
            this.$store.commit('changeModalShow', false)
        },
        handleOk() {
            this.$refs.loginModal.validate().then(() => {
                console.log('验证通过');
            }).catch(() => {
                console.log('验证不通过');
            });
        },
        userLogout() {
            this.$store.commit('changeLogin', false)
            this.$store.commit('changeUserInfo', {})
            
        }
    },


}
</script>
<style lang="less" scoped>
/* header 头部 */
*{
    margin: 0;
    padding: 0;
    /* 取消下划线 */
    text-decoration: none;
    position: relative;
}
i.anticon.anticon-down {
    font-size: 10px;
}
.head-top{
    z-index: 1;
    position: relative;
    width: 100%;
    height: 295px;
    background: no-repeat url(https://course.myhope365.com/img/index-top-bg.564836d0.png);
    background-size: 100% 100%;
    .head-logo {
        width: 1160px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }
    .head-logo>img {
        width: 212px;
        margin: 50px 0 50px;
        
    }
    .head-nav {
        width: 100%;
        height: 80px;
    }
}
.head-nav>div{
    height: 80px;
    width: 1160px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    position: relative;
    justify-content: space-between;
    .nav-1{
        margin-left: 40px;
    }
    .nav-1>ul{
        list-style: none;
        display: flex;
        align-items: center;
    }
   .nav-1>ul>li{
        float: left;
        margin: 0 25px 0 0;
        font-size: 16px;
   }
   .nav-1>ul>li>a{
        color: #fff;
        font-weight: 600;
    }
  .nav-1-i{
        display: inline-block;
        color: inherit;
        font-style: normal;
        line-height: 0;
        text-align: center;
        text-transform: none;
        vertical-align: -.125em;
        text-rendering: optimizeLegibility;
      
  }
}
.dropdown-content {
  display: block;
  
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, .65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1000;
  left: 320px;
  top: 219px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.nav-input{
    position: absolute;
    right: 140px;
    display: flex;
    align-items: center;
    border-radius: 20px; /* 圆角 */
    overflow: hidden;
    width: 300px;
    border: #777878 solid 1px; /* 边框 */;
    margin-right: 35px;
        .searchInput{
            width: 249px;
            border: none;
            outline: none;///去掉输入框的默认边框
            padding: 10px;
            font-size: 16px;
            
    
        }
        .searchButton{
            padding: 5px;
            padding-left: 10px;
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 20px;
        }
}
.nav-login{
    position: absolute;
    right: 0px;
    display: flex;
    align-items: center;
    width: 170px;
    padding:  10px;
    
    .span{
      
      width: 36px;
      height: 36px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 10px;
      position: relative;
      right: 5px;
    }
    
    .login > .open-minded {
        margin-top: -55px;
        font-size: 10px; 
        top: 0px; /* 调整 top 值 */
        right: 30px;
        width: 155px; 
        height: 41px; 
        text-align: center; 
        line-height: 30px; 
        font-weight: 500; 
        background: url(); 
        background-size: 100%; 
        margin-right: 10px; 
    }
   .login>.login-or-register{
        width: 94px;
        height: 30px;
        margin-left: 0px;
        margin-top: 10px;
        background: #fff;
        -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .23);
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .23);
        border-radius: 15px;
        font-weight: 600;
        font-size: 15px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        
   }
    
}
/* </头部> */
/* 下拉列表 */

.classifyList {
    /* 绝对定位相对于父容器 */
  position: absolute;
  top: 100%; /* 紧贴父容器底部 */
  left: 300px;
  min-width: 200px; /* 最小宽度 */
  background: #fff; /* 白色背景 */
  border: 1px solid #e8e8e8; /* 边框 */
  border-radius: 4px; /* 圆角 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  z-index: 9999 !important; /* 确保在其他内容之上 */
  padding: 8px 0; /* 内边距 */
  margin: 0;
  list-style: none;

    .classifyItem {
        padding: 12px 16px; /* 项内边距 */
        cursor: pointer; /* 鼠标指针 */
        transition: background-color 0.2s; /* 过渡效果 */
        }

/* 菜单项hover效果 */
.classifyItem:hover {
  background-color: #f5f5f5; /* hover背景色 */
  color: #1890ff; /* 文字颜色变化 */
}
}

.user-info-box {
    display: flex;
    top: 4px;
    .user-avatar {
        margin-right: 5px;
    }

    .user-info {
        position: relative;
        
        >div:first-of-type {
            font-size: 14px;
            font-weight: bold;
        }
        img{
            width: 16px;
            margin-left: -20px;
            position: absolute;
            z-index: 12;
        }
        >div:nth-of-type(2) {
            color: #ab753f;
            font-weight: bold;
        }
    }
}
.userApproveItem {
    color: black !important;
    padding: 5px 10px !important;
}

.userApproveItem a {
    color: black !important;
}

.ant-popover-inner-content {
    padding: 5px !important;
}

.userApproveItem:hover,
.userApproveItem a:hover {
    background-color: rgb(230, 255, 243) !important;
    color: rgb(0, 207, 140) !important;
}
</style>